<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>department Manager</title>
    <!--引入外部文件  -->
    <%@include file="/WEB-INF/head.jsp" %>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/department.js"></script>
</head>
<body>
<div id="editDlg" class="easyui-dialog" title="My Dialog" style="padding:10px"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true, shadow:false">
    <form id="addForm" method="post">
        <!--使用隐藏域防止数据丢失  -->
        <input type="hidden" name="id" id="departmentId"/>
        <table cellpadding="5">
            <tr>
                <td>部门:</td>
                <td>
                    <input id="cc" class="easyui-textbox" name="name"
                           type="text"/></td>
            </tr>
        </table>
    </form>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" data-method="save" style="width:80px">Submit</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#editDlg').dialog('close')"
           style="width:80px">Clear</a>
    </div>
</div>
<div id="tb" style="padding:5px;height:auto">
    <div style="margin-bottom:5px">
        <a href="javascript:;" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="javascript:;" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="javascript:;" data-method="remove" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>
    <form action="#" id="searchForm" method="post">
        <div>
            部门id <input name="id" class="easyui-textbox" style="width:80px">
            部门: <!-- 应该是从数据库中找的  textField:'name' 需要展示的属性 -->
            <input id="cc1" class="easyui-textbox" name="name"/>
            <a href="javascript:;" data-method="search" class="easyui-linkbutton" iconCls="icon-search">Search</a>
        </div>
    </form>
</div>
</div>
<!--pagination:true   显示分页的内容  -->
<table id="departmentGrid" class="easyui-datagrid" fit="true"
       data-options="
       url:'/department/page',
       fitColumns:true,
       singleSelect:true,
       pagination:true,
       toolbar:'#tb'
    ">
    <thead>
    <tr>
        <th data-options="field:'id',width:100">部门id</th>
        <th data-options="field:'name',width:100,align:'left'">部门</th>
    </tr>
    </thead>
</table>

</body>
</html>
